<template>
    <div class="content">
        <h1>Dialog</h1>
        <p>模态对话框，在浮层中显示，引导用户进行相关操作。</p>
        <p>提供了两种用法。</p>
    </div>
    <div class="content">
        <h2>示例用法1</h2>
        <p>点击查看效果。</p>
        <Button theme="button" @click="toggle">toggle</Button>
        <!--        <Dialog :visible="x" @update:visible="x=$event"></Dialog>-->
        <Dialog v-model:visible="x" :closeOnClickOverlay="false"
                :ok="f1" :cancel="f2"
        >
            <template v-slot:title>
                <span>水滴石穿</span>
            </template>
            <template v-slot:content>
                <span>漫长岁月终将滴水穿石，是吗？</span>
            </template>
        </Dialog>
    </div>
    <div class="content">
        <h2>示例用法2</h2>
        <p>点击查看效果。</p>
        <Button theme="button" @click="showDialog">show</Button>
    </div>
    <div class="page">
        <p class="fl">上一步：
            <router-link to="/doc/button">Button 组件</router-link>
        </p>
        <p class="fr">下一节：
            <router-link to="/doc/tabs">Tabs组件</router-link>
        </p>
    </div>
</template>

<script lang="ts">

    import Dialog from "../lib/Dialog.vue";
    import Button from "../lib/Button.vue";
    import {ref} from "vue";
    import {openDialog} from "../lib/openDialog";

    export default {
        name: 'DialogDemo',
        components: {Button, Dialog},
        setup() {
            const x = ref(false)
            const toggle = () => {
                x.value = !x.value
            }
            const f1 = () => {
                return true
            }
            const f2 = () => {
            }
            const showDialog = () => {
                openDialog({
                    title: '水滴石穿',
                    content: '漫长岁月终将滴水穿石，信吗？',
                    closeOnClickOverlay: false,
                    ok() {
                        console.log('你想要的ok方法');
                    },
                    cancel() {
                        console.log('你想要的cancel方法');
                    }
                })
            }
            return {x, toggle, f1, f2, showDialog}
        }
    };
</script>

<style lang="scss" scoped>

    .content {
        margin-bottom: 40px;

        & > :first-child {
            margin-bottom: 20px;
            position: relative;
            z-index: -1;
        }

        & > p {
            /*margin-left: 20px;*/
            margin-bottom: 20px;
        }
    }

    .page {
        margin-top: 30px;

        a {
            color: #50a0ff;
        }
    }
</style>
